<script setup lang="ts">
const props = defineProps({
  windowHeight: {
    type: Number,
    defalut: 947,
  },
});
const zoomRatio = computed(() => {
  const wH = props.windowHeight || 947;
  return wH / 947;
});

const selectIndex = ref(0);
const dataOpenList = reactive([
  {
    icon: "/images/index/four-mini1.png",
    activeIcon: "/images/index/four1.png",
    title: "开户便捷",
    desc: "通过实名认证即可成为商家中心用户，选择产品并提交相关材料，即可通过审核",
  },
  {
    icon: "/images/index/four-mini2.png",
    activeIcon: "/images/index/four2.png",
    title: "快速接入",
    desc: "我们提供一键轻松接入的支付工具，高效解决用户支付难题与商家收款困扰，让交易畅通无阻",
  },
  {
    icon: "/images/index/four-mini3.png",
    activeIcon: "/images/index/four3.png",
    title: "资金服务",
    desc: "为您精心打造的资金服务方案，盘活沉淀资金，操作流程简化，让资金管理更加便捷、灵活",
  },
]);

const setSelectIndex = (i: number) => {
  selectIndex.value = i;
};
</script>

<template>
  <div class="swiper-pages">
    <div class="content" :style="'transform: scale(' + zoomRatio + ');'">
      <div class="title">提供可接入的产品与能力</div>
      <div class="desc">
        我们为商户精心打造全方位聚付服务方案，集成刷卡、扫码、刷脸及互联网等多种支付方式于一体，无缝对接线上线下场景，全方位满足商户的多样化支付需求，助力商户实现支付流程的高效与便捷
      </div>
      <div class="ability">
        <div
          class="ability-item"
          :class="{ active: selectIndex === i }"
          v-for="(item, i) of dataOpenList"
          :key="i"
        >
          <div
            class="ability-content"
            :style="{ backgroundImage: `url(${item.activeIcon})` }"
          >
            <div class="a-title">{{ item.title }}</div>
            <div class="a-desc">
              {{ item.desc }}
            </div>
          </div>
          <div
            class="item-content"
            @click="setSelectIndex(i)"
            :style="{ backgroundImage: `url(${item.icon})` }"
          >
            <div class="a-title">{{ item.title }}</div>
            <div class="a-desc">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/mixins.scss";

.swiper-pages {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  .title {
    font-weight: 700;
    font-size: 32px;
    color: #070a14;
    text-align: center;
  }

  .desc {
    width: 858px;
    margin: 42px auto 0 auto;
    font-weight: 400;
    font-size: 14px;
    color: #8b8b8b;
    line-height: 30px;
    text-align: center;
  }

  .ability {
    margin-top: 47px;
    position: relative;
    width: 100%;
    height: 406px;
    overflow: hidden;
    display: flex;

    .ability-item {
      cursor: pointer;
      width: 230px;
      height: 100%;
      background-size: 100% 100%;
      margin-right: 18px;
      overflow: hidden;
      position: relative;
      transition: width 0.3s ease;
      &:last-child {
        margin-right: 0;
      }
      &.active {
        &.ability-item {
          width: 622px;
          transition: width 0.3s ease;
        }
        .item-content {
          z-index: 0;
          display: none;
        }
        .ability-content {
          z-index: 10;
          display: block;
        }
      }
      .item-content {
        padding-left: 30px;
        padding-top: 30px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        z-index: 10;

        .a-title {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
        }
        .a-desc {
          width: 175px;
          margin-top: 18px;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 18px;
        }
      }
      .ability-content {
        width: 622px;
        height: 406px;
        margin-right: 18px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding-left: 30px;
        padding-top: 30px;
        position: absolute;
        z-index: 1;
        display: none;
        transition: all 0.3s ease;
        img {
          width: 100%;
          height: 100%;
        }
        .a-title {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
        }
        .a-desc {
          margin-top: 18px;
          font-weight: 400;
          font-size: 12px;
          color: #ffffff;
          line-height: 18px;
        }
      }
    }
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
</style>
